
/**
 * 页面布局部分
*/
.home {
  background: radial-gradient(#07424A 0%, #010B10 100%);
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.layout {
  position: absolute;
  top: 7.41%;
  left: 5.52%;
  width: 94.48%;
  height: 88.33%;
  padding: 10px;

  .el-table {
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: none;

    &::before {
      background-color: transparent;
    }

    .el-table__header-wrapper {
      display: none;
    }

    .el-table__body-wrapper, .el-table__body {
      width: 100%;
      height: 100%;

      tr {
        background-color: transparent;
        height: calc(100% / 6);

        &.row0 {
          height: 0;
        }

        &.el-table__row:hover {
          td {
            background-color: transparent;
          }
        }
      }

      td.el-table__cell {
        padding: 0;
        border: none;
      }

      .cell {
        height: 100%;
        padding: 10px;
      }
    }
  }

  .size1 {
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 4px 0px rgba(22, 208, 255, 0.9);
    border-radius: 4px;
    color: #FFF;
		overflow: hidden;

    &.hide {
      display: none;
    }
  }
}

.footer {
  background-color: #04272e;
  position: absolute;
  height: 4.26%;
  width: 100%;
  bottom: 0;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;

  &>div {
    margin: 0 20px;
  }
}


/**
 * 菜单部分样式
*/
.menulist {
	background: #0F2028;
	width: 5.52%;
	height: 92.59%;
	border-radius: 0px 0px 0px 0px;
	border: 1px solid #2F4F69;
	display: flex;
	flex-direction: column;

	.menu {
		position: relative;
		min-height: 7.78%;
		padding: 16px 12px;
		font-size: 16px;
		color: #6CA7B4;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&.active, &:hover {
			background: #1A2F2D;
			color: #83C95C;

			.line {
				position: absolute;
				left: 0;
				width: 3.85%;
				height: 100%;
				background: #83C95C;
				border-radius: 0px 4px 4px 0px;
			}
		}

		.icon {
			width: 16px;
			height: 16px;
			margin-bottom: 2px;
		}

		div {
			text-align: center;
		}
	}
}


/**
 * 顶部样式
*/
.screentop {
	background: #0A191F;
	width: 100%;
	height: 7.41%;
	border: 1px solid #0F2028;
	display: flex;
	align-items: center;
	
	.logo {
		width: 1.875%;
		height: 45%;
		background: #519E59;
		border-radius: 1px;
		margin: 0 0.5% 0 1%;
	}
	
	.title {
		font-size: 24px;
		color: #83C95C;
		flex: 1;
	}
	
	.list {
		width: 63%;
		height: 100%;
		color: #6CA7B4;
	
		&>div {
			width: 25%;
			border: 1px solid #000000;
		}
	}
	
	.info {
		width: 15.2%;
		height: 100%;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	
		.icon {
			width: 40px;
			height: 40px;
			line-height: 40px;
			background: #FFFFFF;
			border-radius: 50%;
			text-align: center;
			color: #333333;
			margin-right: 4%;
		}
	
		.el-button {
			margin-left: 10%;
			color: #FFFFFF;
		}
	}
}
	


/**
 * 卡片部分样式
 * n*1的高度
*/
.card {
	position: relative;
	height: calc((88.33vh - 20px) / 6 - 20px);
  padding: 10px;
}

.card-height2 {
	height: calc((88.33vh - 20px) / 3 - 20px);
	
	.card-info {
		top: 12%;
		height: 88%;
	}
}

.card-height3 {
	height: calc((88.33vh - 20px) / 2 - 20px);
}

.card-height4 {
	height: calc((88.33vh - 20px) / 1.5 - 20px);
}

.card-height5 {
	height: calc((88.33vh - 20px) / 1.2 - 20px);
}

.card-height6 {
	height: calc((88.33vh - 20px) - 20px);
}

.card-title {
  color: #D9D9D9;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

  &:before {
    content: '';
    width: 8px;
    height: 8px;
    background: #07C160;
    display: inline-flex;
    border-radius: 8px;
    margin-right: 10px;
  }
}

.card-info {
  position: absolute;
  top: 25%;
  width: calc(100% - 50px);
  height: 75%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 16px;
	
	.unit {
		color: #6CA7B4;
	}
}

.value-color1 {
	color: #66f6e5;
}

.value-color2 {
	color: #ffffff;
}